<div id="dragable" style="width: 100px; height: 100px; background-color: pink;">
</div>
<script>
    let baseX = 0,
        baseY = 0;
    let dragable = document.getElementById("dragable");
    dragable.addEventListener("mousedown", () => {
        let startX = event.clientX,
            startY = event.clientY;
        let move = event => {
            // console.log(event.clientX, event.clientY);
            let x = baseX + event.clientX - startX,
                y = baseY + event.clientY - startY;

            dragable.style.transform = `translate(${x}px, ${y}px)`
        }
        let up = event => {
            baseX = baseX + event.clientX - startX;
            baseY = baseY + event.clientY - startY;

            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", up);
        }

        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", up)
    })
</script>